<template>
    <div id="WindowsContingencyPlanOperation">
        <div style="width: 100%;z-index: 100;background-color: var(--el-fill-color-blank);padding: 10px 0;">
            <div
                style="display: flex; justify-content: space-between; align-items: center; position: relative;padding: 10px 0;">
                <el-page-header @back="goBack" title="返回" style="margin-left: 10px;">
                    <template #content>
                        <div>
                            <span class="text-large font-600 mr-3"> {{ title }} </span>
                        </div>
                    </template>
                </el-page-header>

            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column label="方案标题" width="200">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <span style="margin-left: 10px">{{ scope.row.ryD_ContingencyPlanTitle }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="方案说明" width="250">
                <template #default="scope">
                    {{ scope.row.ryD_ContingencyPlanExplain }}
                </template>
            </el-table-column>
            <el-table-column label="发布时间" width="200">
                <template #default="scope">
                    {{ dateTimeSpan(scope.row.ryD_CreateTime) }}
                </template>
            </el-table-column>
            <el-table-column label="接收人" width="250">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto"
                        v-for="item in scope.row.ryD_DefaultUsers" :key="item">
                        <template #default>
                            <div>姓名: {{ item.realName }}</div>
                            <div>工号: {{ item.ryD_RyderNo }}</div>
                        </template>
                        <template #reference>
                            <el-tag size="large">{{ item.realName }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="发布人" width="100">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>姓名: {{ scope.row.ryD_CreateBy.realName }}</div>
                            <div>工号: {{ scope.row.ryD_CreateBy.ryD_RyderNo }}</div>
                        </template>
                        <template #reference>
                            <el-tag size="large">{{ scope.row.ryD_CreateBy.realName }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="120">
                <template #default="scope">
                    <el-button size="large" type="success" @click="look(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup >

import { useRouter } from 'vue-router';

import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { ref } from 'vue'
import axios from '@/utils/axios'
import dateTimeSpan from '@/utils/dateTime';

var title = ref("历史发布方案");
const router = useRouter();

const goBack = () => {
    router.back();
}
const loading = ref(true)

const tableData = ref([])

axios({
    method: 'get',
    url: "/api/GetContingencyPlanTableHistory"
}).then(res => {
    tableData.value = res;
    loading.value = false;
})

const look = (index, row) => {
    router.push({
        name: 'WindowsContingencyPlanOperation',
        query: {
            HistoryId: row.ryD_Id,
            Type: 3
        },
    });
}

</script>

<style>
#WindowsContingencyPlanOperation .el-page-header__breadcrumb {
    margin: 0;
}

#WindowsContingencyPlanOperation h1 {
    font-size: 2rem;
}
</style>